import React from 'react';
import styles from './index.module.less';
import { Lunar, Solar } from 'lunar-javascript';

const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

const DateDisplay: React.FC = () => {
  const now = new Date();
  const day = now.getDate();
  const month = now.getMonth();
  const year = now.getFullYear();
  const week = weekMap[now.getDay()];

  // 农历与节日
  const solar = Solar.fromDate(now);
  const lunar = Lunar.fromDate(now);
  const lunarStr = lunar.getMonthInChinese() + '月' + lunar.getDayInChinese();
  const lunarFestival = lunar.getFestivals().join('、');
  const solarFestival = solar.getFestivals().join('、');
  const jieqi = lunar.getJieQi();

  // 优先显示节日，其次节气，否则显示农历
  let subInfo = week + ' 农历' + lunarStr;
  if (lunarFestival) subInfo += ' ' + lunarFestival;
  else if (solarFestival) subInfo += ' ' + solarFestival;
  else if (jieqi) subInfo += ' ' + jieqi;

  // 右侧节日卡片优先显示节日或节气
  const rightFestival = lunarFestival || solarFestival || jieqi;

  return (
    <div className={styles.dateCard}>
      <div className={styles.leftBox}>
        <div className={styles.mainDate}>
          <span className={styles.day}>{day}</span>
          <span className={styles.separator}>/</span>
          <span className={styles.yearMonth}>{month + 1} {year}</span>
        </div>
        <div className={styles.subInfo}>{subInfo}</div>
      </div>
      <div className={styles.rightBox}>
        {rightFestival && (
          <div className={styles.festival}>
            <span className={styles.icon}>📅</span>
            {rightFestival}
          </div>
        )}
      </div>
    </div>
  );
};

export default DateDisplay; 